<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">

    </head>

    <body>
        <div class="content">
            <div class="item-1 item">1</div>
            <div class="item-2 item">2</div>
            <div class="item-3 item">3</div>
            <div class="item-4 item">4</div>
            <div class="item-5 item">5</div>
            <div class="item-6 item">6</div>
            <div class="item-7 item">7</div>
            <div class="item-8 item">8</div>
            <div class="item-9 item">9</div>
            <div class="item-10 item">10</div>
            <div class="item-11 item">11</div>
            <div class="item-12 item">12</div>
        </div>
    </body>
</html>

<style>
    .content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .item-1 {
        background-color: aliceblue;
    }

    .item-2 {
        background-color:aqua;
    }

    .item-3 {
        background-color: beige;
    }

    .item-4  {
        background-color: brown;
    }

    .item-5 {
        background-color: chartreuse;
    }

    .item-6 {
        background-color: darkgoldenrod;
    }

    .item-7 {
        background-color: darksalmon;
    }

    .item-8 {
        background-color: darkgreen;
    }

    .item-9 {
        background-color: black;
    }

    .item-10 {
        background-color: blue;
    }

    .item-11 {
        background-color: cyan;
    }

    .item-12 {
        background-color: fuchsia;
    }

    .item {
        width: 150px;
        height: 300px;
    }
</style>